<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Mednalytics</title>
    <!-- Iconic Fonts -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="../../vendors/iconic-fonts/font-awesome/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/flat-icons/flaticon.css">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/cryptocoins/cryptocoins.css">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/cryptocoins/cryptocoins-colors.css">
    <!-- Bootstrap core CSS -->
    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Page Specific Css (Datatables.css) -->
    <link href="../../assets/css/datatables.min.css" rel="stylesheet">
    <!-- jQuery UI -->
    <link href="../../assets/css/jquery-ui.min.css" rel="stylesheet">
    <!-- Page Specific CSS (Slick Slider.css) -->
    <link href="../../assets/css/slick.css" rel="stylesheet">
    <!-- Mednalytics styles -->
    <link href="../../assets/css/style.css" rel="stylesheet">

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="../../favicon.ico">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body class="ms-body ms-aside-left-open ms-primary-theme ms-has-quickbar">
<!-- Setting Panel -->
<script src="../../assets/reuseCode/top.js"></script>
<!-- Body Content Wrapper -->
<!-- Body Content Wrapper -->
<div class="ms-content-wrapper" id="add">
    <div class="row">
        <div class="col-md-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb pl-0">
                    <li class="breadcrumb-item"><a href="#"><i class="material-icons">home</i> 首页</a></li>
                    <li class="breadcrumb-item"><a href="#">病人</a></li>
                    <li class="breadcrumb-item active" aria-current="page">添加患者</li>
                </ol>
            </nav>
        </div>
        <div class="col-xl-12 col-md-12">
            <div class="ms-panel">
                <div class="ms-panel-header ms-panel-custome">
                    <h6>添加患者</h6>
                    <a href="patient-list.html" class="ms-text-primary">病人名单
                    </a>
                </div>
                <div class="ms-panel-body">
                    <form class="needs-validation" novalidate @submit.prevent="submitpatient()">
                        <div class="form-row">
                            <div class="col-md-3 mb-3">
                                <label for="validationCustom002">姓 名</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="validationCustom002" placeholder="输入姓氏"
                                          v-model="name" required>
                                </div>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label for="validationCustom004">身份证号</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="validationCustom004"
                                           placeholder="输入身份证号" v-model="idCard" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-3 mb-3">
                                <label>所属科室</label>
                                <div class="input-group">
                                    <select class="form-control" id="validationCustom220"  v-model="officeId" @change="loadDoctors(this.officeId)">
                                        <option value="ABC" selected>请选择---</option>
                                        <option v-for="department in departments" :value="department.officeId" v-text="department.officeName">泌尿科</option>

                                    </select>

                                </div>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label>主治医师</label>
                                <div class="input-group">
                                    <select class="form-control" id="mydoc" placeholder="选择医生"  v-model="doctorId" required >
                                        <option value="" selected>请选择---</option>
                                        <option value="" v-for="doctor in doctors" :value="doctor.id" v-text="doctor.name">牛魔王</option>


                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-3 mb-2">
                                <label for="validationCustom003">患者电话</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="validationCustom003"
                                           placeholder="输入电话号码" v-model="phone" required>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label>上传头像</label>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="validatedCustomFile"  @change="getFile($event)" accept="image/*">
                                    <label class="custom-file-label" for="validatedCustomFile" v-text="file.name">选择文件...</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-3 mb-2">
                                <label>患者病历</label>
                                <div class="input-group">
                                    <textarea class="form-control" id="exampleTextarea1" v-model="history" rows="3"></textarea>

                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <img id="img" src="../../assets/img/dashboard/headmodel.jpg "
                                     class="ms-img-large ms-user-img mx-auto info" alt="people" >
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-3 mb-3">
                                <label>性别</label>
                                <ul class="ms-list d-flex">
                                    <li class="ms-list-item pl-0">
                                        <label class="ms-checkbox-wrap">
                                            <input type="radio" name="radioExample" value="男">
                                            <i class="ms-checkbox-check"></i>
                                        </label>
                                        <span> 男性 </span>
                                    </li>
                                    <li class="ms-list-item">
                                        <label class="ms-checkbox-wrap">
                                            <input type="radio" name="radioExample" value="女" checked="">
                                            <i class="ms-checkbox-check"></i>
                                        </label>
                                        <span> 女性 </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <button class="btn btn-warning mt-4 d-inline w-20" type="button" @click="clearAll()">重置</button>
                        <button class="btn btn-primary mt-4 d-inline w-20" type="submit">添加</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
</main>
<!-- Reminder Modal -->
<script src="../../assets/reuseCode/reminderModal.js"></script>
<!-- Notes Modal -->
<script src="../../assets/reuseCode/notesModal.js"></script>
<script src="../../assets/reuseCode/modal.js"></script>
<!-- SCRIPTS -->
<!-- Global Required Scripts Start -->
<script src="../../assets/js/jquery-3.3.1.min.js"></script>
<script src="../../assets/js/popper.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/perfect-scrollbar.js"></script>
<script src="../../assets/js/jquery-ui.min.js"></script>
<!-- Global Required Scripts End -->
<!-- Page Specific Scripts Start -->
<script src="../../assets/js/slick.min.js"></script>
<script src="../../assets/js/moment.js"></script>
<script src="../../assets/js/jquery.webticker.min.js"></script>
<script src="../../assets/js/Chart.bundle.min.js"></script>
<script src="../../assets/js/Chart.Financial.js"></script>
<!-- Page Specific Scripts Finish -->
<!-- Mednalytics core JavaScript -->
<script src="../../assets/js/framework.js"></script>
<!-- Settings -->
<script src="../../assets/js/settings.js"></script>
<!--添加病人的js-->
<script src="../../assets/js/patient/add-patient.js"></script>
</body>
</html>
